UI overhaul Phase 1: unify typography on the --text-* scale tokens - #166
Merged
Conversation
Replace 294 arbitrary text-[Npx] utilities across App.tsx and 24 feature components with the sanctioned --text-* scale tokens, eliminating the ad-hoc third typography mechanism (the .text-role-* roles and the size tokens stay; the arbitrary values are gone). Add --text-pico (7px) so the 13 finest dense-label usages keep their exact size; only two singletons snap minimally (6px->7px grid label, 22px->24px hero stat). Widen the style-discipline guard to per-rule enforced roots: the arbitrary-text-size rule now covers all of src/ (so App.tsx is held to it too); raw-hex stays scoped to components/ui until the hex-cleanup phases. Update the one unit test that asserted the old text-[9px] class hook. Verified: lint:style, tsc --noEmit, 830 unit tests, and production build all green. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_016to3B8Hf9eAGxAbzpQNvku
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Phase 1 of the UI overhaul — typography unification
Second PR in the phased UI overhaul (plan: enforcement-first, risk-staged; #165 landed Phase 0). This phase closes the single biggest uniformity violation: the ad-hoc third typography mechanism.
Problem
The codebase had three competing typography mechanisms. The
.text-role-*semantic roles are live (used viagetTextRoleClassName()in 11 files) and the--text-*size tokens are sanctioned — but 294 arbitrarytext-[Npx]utilities acrossApp.tsxand 24 feature components routed around both. Worse, the type-scale token comment claimed these were "banned," but nothing enforced it (the same drift that returned 257 hex after the 2026-05-13 pass).Change
text-[Npx]with the exact--text-*scale token (10px→text-meta,9px→text-micro,11px→text-eyebrow,8px→text-nano,12px→text-body-sm). The codemod is size→size only — it touches nothing but the font-size utility, so rendered text size is preserved.--text-pico(7px) so the 13 finest dense-label usages keep their exact size. Only two singletons snap minimally: a 6px grid label → 7px, and a 22px hero stat → 24px (text-value-lg).scripts/check-style-discipline.mjsnow scopes each rule independently —arbitrary-text-sizecovers all ofsrc/(soApp.tsxis held to it too), whileraw-hex-colorstays atcomponents/ui/until the later hex-cleanup phases. Arbitrary text sizes can no longer regress repo-wide..text-role-*roles and the size tokens both remain — only the arbitrary values are gone. Allowlisted canvas/viz modules (which compute sizes CSS classes can't express) are untouched.Verification
npm run lint:style✓ (no arbitrary text sizes anywhere insrc/; no raw hex inui/)npm run lint(tsc --noEmit) ✓npm run test:unit✓ (830 tests; updated the one test asserting the oldtext-[9px]hook)npm run build✓Invariants
No Phase 1 measurement, citation, or data-contract surface is touched;
data-text-roletest hooks are preserved. Pure presentation-layer change that builds on the existing token system and device-rack ethos.🤖 Generated with Claude Code
Generated by Claude Code